<template>
  <div class="mainbody" aria-label="Coach">
    <bpm-c-subnavbar @navClicked="navClicked"
                     :showLeft="false"
                     :rightShowArray="['save','close']"/>
    <bpm-d-grid
      :needBar="false"
      :showCheckbox="false"
      :height="450"
      @gridClicked="gridClicked"
      @gridDBLClicked="selectedClicked"
      :gridTypeInfo="gridTypeInfo"
      :gridInfo="gridInfo"
      :gridTitleInfo="gridTitleInfo"
      :gridShowInfo="gridShowInfo"
      :gridWidthInfo="gridWidthInfo"/>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'bpmDSimplechoose',
  props: {
    title: '',
    pselectType: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      gridTypeInfo: ['text', 'text'],
      chooseIndex: -1
    }
  },
  methods: {
    ...mapActions(['getCrossCompany', 'queryStaffBankInfo', 'initChooseList']),
    clearList () {
      this.chooseIndex = -1
      if (this.pselectType === this.chooseDialogEnum.reimbursecompanyname) {
        // this.initChooseList({name: 'crossCompanyInfo'})
      } else if (this.pselectType === this.chooseDialogEnum.accountBankNumber) {
        // this.initChooseList({name: 'staffBankList'})
      }
    },
    navClicked (atype) {
      if (atype === 'close') {
        this.$emit('closeClicked')
      } else if (atype === 'save') {
        if (this.chooseIndex >= 0) {
          this.$emit('selectClicked', this.gridInfo[this.chooseIndex])
        } else {
          this.alert(this.otherI18n.mustChooseOne)
        }
      }
    },
    gridClicked (aindex) {
      this.chooseIndex = aindex
    },
    selectedClicked (aindex) {
      if (this.pselectType === this.chooseDialogEnum.reimbursecompanyname) {
        console.log('choose', aindex)
      }
      console.log('choose', aindex)
      this.$emit('selectClicked', this.gridInfo[aindex])
    }
  },
  computed: {
    ...mapState(['ssc', 'chooseDialogEnum', 'otherI18n']),
    gridInfo () {
      if (this.pselectType === this.chooseDialogEnum.reimbursecompanyname) {
        return this.ssc.reimburse.crossCompanyInfo
      } else if (this.pselectType === this.chooseDialogEnum.accountBankNumber) {
        return this.ssc.reimburse.staffBankList
      }
    },
    gridShowInfo () {
      if (this.pselectType === this.chooseDialogEnum.reimbursecompanyname) {
        return ['companycode', 'companyname']
      } else if (this.pselectType === this.chooseDialogEnum.accountBankNumber) {
        return ['bankCode', 'employeeBankNo', 'bankName']
      }
    },
    gridTitleInfo () {
      if (this.pselectType === this.chooseDialogEnum.reimbursecompanyname) {
        return [this.otherI18n.comcode, this.otherI18n.comname]
      } else if (this.pselectType === this.chooseDialogEnum.accountBankNumber) {
        return [this.otherI18n.bankcode, this.otherI18n.cardno, this.otherI18n.bankname]
      }
    },
    gridWidthInfo () {
      if (this.pselectType === this.chooseDialogEnum.reimbursecompanyname) {
        return [490, 490]
      } else if (this.pselectType === this.chooseDialogEnum.accountBankNumber) {
        return [300, 330, 350]
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .mainbody {
    width: 980px;
    min-height: 250px;
  }
</style>
